<template>
  <div>
    <!-- 轮播推荐和轮播海报 -->
    <div class="slide">
  <KeepAlive>
    <slideShowL></slideShowL>
  </KeepAlive>
    <slideShowR></slideShowR>
    </div>
    <template v-for="(item,index) of musicList">
    <h3 :key="index"><b>{{ classifys[index] }}<span>&nbsp;></span></b></h3>
    <div class="slide" :key="index">
    <songList v-for="(item,i) of item" :key="i" :musicList="item"></songList>
    </div>
    </template>
  </div>
</template>

<script>
import slideShowL from './child/slideShowL.vue'
import slideShowR from './child/slideShowR.vue'
import songList from '@/components/songList.vue'
import { mapState } from 'vuex'
export default {
    components:{
      slideShowL,
      slideShowR,
      songList,
    },
    data(){
      return {
        classifys:[
          "猜你喜欢",
          "每天听点好音乐",
          "C-Pop 现场歌单",
          "惬意一刻",
          "你的歌单宝藏库",
          "近期更新",
          "大家都在听",
          "歌单遨游指南"
        ]
      }
    },
    computed:{
      ...mapState({
        musicList:state=>state.musicList
      })
    },
}
</script>

<style lang="scss" scoped>
span{
  opacity:0.5;
}
</style>